<template>
	<div>
		<div class="space-y-4 text-sm">
			<div class="p-4 bg-white rounded-lg " v-for="(item, index) in order.cart">
				<div class="mb-4">{{ item.store.name }}</div>
				<div class="flex items-center" v-if="item.goods.length > 1">
					<div class="space-x-2 overflow-x-auto grow whitespace-nowrap">
						<div class="inline-block w-20 h-20 overflow-hidden rounded-md" v-for="(g, index) in item.goods">
							<LazyImage :src="g.thumb" />
						</div>
					</div>
					<div @click="showDetailVisible(index)"
						class="flex items-center px-2 space-x-1 text-xs text-gray-500 shrink-0">
						<div>共{{ item.goods.length }}件</div>
						<IMingcute:rightFill />
					</div>

				</div>
				<div v-else>
					<div class="flex items-center h-20">
						<div class="w-20 h-full overflow-hidden rounded-md shrink-0">
							<LazyImage :src="item.goods[0].thumb" />
						</div>
						<div class="grid h-full grid-rows-4 py-1 ml-4 text-sm text-gray-600">
							<div class=" line-clamp-1">{{ item.goods[0].name }}</div>
							<div class=" line-clamp-1">{{ item.goods[0].sku }}</div>
							<div class="">{{ item.goods[0].service }}</div>
							<div class="flex items-center justify-between">
								<div>¥ {{ item.goods[0].price }}</div>
								<div>x {{ item.goods[0].number }}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="mt-4 space-y-3 text-gray-500 bg-white rounded-lg">
					<div class="flex items-center justify-between">
						<div>服务</div>
						<div>可选服务</div>
					</div>
					<div class="flex justify-between">
						<div>配送</div>
						<div class="text-right">
							<div>快递运输</div>
							<div>预计6月6日发货，6.9日送达</div>
						</div>
					</div>
					<div class="flex items-center justify-between">
						<div>留言</div>
						<div>建议留言前先与卖家确认</div>
					</div>
				</div>
				<Popup ref="popupRef">
					<div class="flex flex-col p-4 bg-white rounded-t-lg h-5/6">
						<div class="flex items-center justify-between shrink-0">
							<div class="text-lg">商品清单</div>
							<div class="flex items-center space-x-2 text-xs text-gray-700">
								<div>共 {{ item.goods.length }} 件</div>
								<div class="p-1 bg-gray-100 rounded-full" @click="closeDetailVisible(index)">
									<IMdi:close />
								</div>
							</div>
						</div>
						<div class="py-2 mt-2 space-y-10 overflow-y-auto grow">
							<div v-for="(info, index) in item.goods">
								<div class="flex items-center h-24 space-x-2 ">
									<div class="w-24 h-full overflow-hidden rounded-lg shrink-0">
										<LazyImage :src="info.thumb" />
									</div>
									<div class="grid h-full grid-rows-4">
										<div class="leading-8  line-clamp-1">{{ info.name }}</div>
										<div class="text-xs text-gray-500 line-clamp-1">{{ info.sku }}</div>
										<div class="flex items-center justify-between text-xs">
											<div class="text-red-500">
												<span class="">¥</span>
												<span class="text-base">{{ info.price }}</span>
											</div>
											<div>x {{ info.number }}</div>
										</div>
									</div>
								</div>
								<div class="mt-2 space-y-1 text-xs text-gray-600" v-if="item.gifts.length > 0">
									<div class="flex items-center justify-between" v-for="(gift) in item.gifts">
										<div class=" line-clamp-1">赠品：{{ gift.name }}</div>
										<div class="ml-8  shrink-0">x {{ gift.number }}</div>
									</div>
								</div>
								<div class="pl-4 mt-4 space-y-2" v-if="item.markupBuys.length > 0">
									<div class="flex items-center h-14" v-for="(mb, index) in item.markupBuys">
										<div class="h-full overflow-hidden rounded-md w-14 shrink-0">
											<LazyImage :src="mb.thumb" />
										</div>
										<div class="flex flex-col justify-between h-full ml-2 grow">
											<div class="text-xs line-clamp-2">
												<div
													class="inline-block px-1 text-xs text-red-500 scale-75 border-2 border-red-200">
													加价购</div>
												<span class="">{{ mb.name }}</span>
											</div>
											<div class="flex items-center justify-between text-xs">
												<div>
													<span>¥</span>
													<span class="text-sm">{{ mb.price }}</span>
												</div>
												<div class="text-xs">x {{ mb.number }}</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</Popup>
			</div>
		</div>

	</div>
</template>
    
<script setup lang='ts'>
const order = inject<any>('order');
const popupRef = ref();

const showDetailVisible = (index: number) => {
	popupRef.value[index].open()
}
const closeDetailVisible = (index: number) => {
	popupRef.value[index].close()
}
</script>
    
<style></style>